<template>
    <div class="chat-input">
        <el-input v-model="chatContent" resize="none" placeholder="和我开始聊天吧" type="textarea" rows="1" autofocus
            :autosize="{ minRows: 1, maxRows: 3 }" />
        <el-button circle color="#409EFF" :disabled="isDisabled" @click="onSubmit">
            <el-icon>
                <Send />
            </el-icon>
        </el-button>
    </div>
</template>

<script setup>
import { computed, ref } from "vue"
import Send from "../icons/Send.vue"
import { Plus } from "@element-plus/icons-vue"

const chatContent = ref()
// const props = defineProps(['onSend'])//获取父组件传参
const emit = defineEmits(['onSend'])

const isDisabled = computed(() => {
    return !chatContent.value
})
const onSubmit = () => {
    if (chatContent.value) {
        emit('onSend', chatContent.value)
        chatContent.value = null
    }
};

</script>

<style lang="scss" scoped>
.chat-input {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    // justify-items: center;
    row-gap: 0.5rem;
    gap: 0.5rem;
    width: 100%;
    border: 1px solid #cfd3d3;
    border-radius: 25px;
    padding: 4px;

    .el-textarea {
        padding: .3rem 0 .3rem 1rem;

    }

    // .78125rem
    .el-button {
        height: 2.5rem;
        width: 2.5rem;

        .el-icon {
            font-size: 1.3rem;
        }
    }
}

:deep(.el-textarea__inner) {
    outline: none;
    border: none;
    box-shadow: none;
}

.chat-input:focus-within {
    // border: 1px solid blue;
    outline: 2px solid rgb(51.2, 126.4, 204);
}
</style>
